<template>
  <div class="container">
    <!-- <vue-particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="option"
    /> -->

    <div class="loginFormBox">
      <div class="boxLeft">
        <img class="loginImg" src="../assets/loginImg.png" alt="" />
      </div>
      <div class="boxRight">
        <div class="title">
          <h3>欢迎使用，</h3>
          <h3>Pricing Tool Online</h3>
        </div>
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          status-icon
          :rules="rules"
          label-width="68px"
          class="demo-ruleForm"
          label-position="left"
        >
          <el-form-item label="账号：" prop="loginName">
            <el-input
              v-model="loginForm.loginName"
              size="large"
              placeholder="请输入账号"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input
              v-model="loginForm.password"
              size="large"
              placeholder="请输入密码"
              type="password"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
        <el-button type="primary" color="#3A62D7" @click="submitForm()"
          >立即登录</el-button
        >
        <div class="bottom">
          <div class="bottomLeft">
            <el-checkbox
              v-model="checked"
              @change="handleChange()"
              size="large"
            />
            <div style="margin-left: 4px">记住密码</div>
          </div>
          <div class="bottomRight">忘记密码？</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { loadFull } from 'tsparticles'
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { login, current } from '@/api/login'

const store = useStore()

let loginForm = reactive({
  loginName: '',
  password: ''
}) // 表单绑定响应式对象
onMounted(() => {
  if (store.state.remenberPass) {
    loginForm.loginName = store.state.remenberPass.loginName
    loginForm.password = store.state.remenberPass.password
    checked.value = store.state.remenberPass.checked
    // console.log(11, loginForm, store.state.remenberPass)
  }
})
const loginFormRef = ref() // 表单引用对象
let checked = ref(false)

const rules = reactive({
  loginName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const router = useRouter()
const handleChange = () => {
  console.log('checked', checked.value)
}
// 提交表单
const submitForm = () => {
  // 1. 表单校验
  loginFormRef.value.validate((valid) => {
    if (valid) {
      // console.log('校验数据', loginForm)
      login(loginForm).then(async (res) => {
        // console.log(res)
        if (res.data.code === '0') {
          store.commit('changeToken', res.data.data)
          // console.log('token',store.state.token);
          localStorage.setItem('token', res.data.data)
          store.commit('changeGetterRouter', false)
          const roleData = await current()
          // console.log(roleData);
          store.commit('changeUserInfo', roleData.data.data)
          console.log('用户信息', store.state.userInfo)
          console.log('用户权限', store.state.routerList)
          store.commit('remenberPassword', {
            loginName: loginForm.loginName,
            password: loginForm.password,
            checked: checked.value
          })
          ElMessage.success('登录成功')
          // console.log('路由',router.getRoutes());

          router.push(store.state.routerList[0].url)
        } else {
          ElMessage.error(res.data.msg)
        }
      })
      // axios.post('/adminApi/user/login', loginForm).then((res) => {
      //   console.log(res.data.data)
      //   if (res.data.code === '0000') {
      //     store.commit('changeUserInfo', res.data.data)
      //     store.commit('changeGetterRouter', false)
      //     router.push('/Dashboard')
      //   } else {
      //     ElMessage.error(res.data.msg)
      //   }
      // })
    }
  })
  // 2. 发送请求
  // 3. 拿到token跳转到首页
}

//  const handleLogin = () => {
//   localStorage.setItem('token', '123456')
// }

// 配置particles
const option = {
  background: {
    color: {
      value: '#0d47a1'
    }
  },
  fpsLimit: 120,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: 'push'
      },
      onHover: {
        enable: true,
        mode: 'repulse'
      },
      resize: true
    },
    modes: {
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40
      },
      push: {
        quantity: 4
      },
      repulse: {
        distance: 200,
        duration: 0.4
      }
    }
  },
  particles: {
    color: {
      value: '#ffffff'
    },
    links: {
      color: '#ffffff',
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1
    },
    collisions: {
      enable: true
    },
    move: {
      direction: 'none',
      enable: true,
      outModes: {
        default: 'bounce'
      },
      random: false,
      speed: 6,
      straight: false
    },
    number: {
      density: {
        enable: true,
        area: 800
      },
      value: 80
    },
    opacity: {
      value: 0.5
    },
    shape: {
      type: 'circle'
    },
    size: {
      value: { min: 1, max: 5 }
    }
  },
  detectRetina: true
}

const particlesInit = async (engine) => {
  await loadFull(engine)
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    to right,
    #3a62d7 0%,
    #3a62d7 30.5%,
    #d6e9ff 30.5%,
    #d6e9ff 100%
  );
}
.loginImg {
  overflow: hidden;
  min-height: 80vh;
  width: 100%;
}
.loginFormBox {
  overflow: hidden;
  width: 62vw;
  height: 80vh;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffffaf;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-radius: 7px;
  .boxLeft {
    width: 50%;
    height: 100%;
    background-color: #9da5c6;
  }
  .boxRight {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: -64px;
    .title {
      margin-left: -97px;
      height: 72px;
    }
    .demo-ruleForm {
      width: 360px;
      margin-top: 28px;
      margin-bottom: 4px;
    }
    h3 {
      text-align: left;
      font-size: 27px;
      margin-bottom: 2px;
      color: #3a62d7;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 360px;
      font-size: 13px;
      margin-top: 4px;
      .bottomLeft {
        display: flex;
        justify-content: start;
        align-items: center;
      }
      .bottomRight {
        cursor: pointer;
        color: #3a62d7;
      }
    }
  }
}
::v-deep .el-form-item__label {
  color: #000000ee;
  font-weight: 700;
}
.el-button {
  height: 38px;
  width: 360px;
  overflow: hidden;
  border-radius: 19px;
}
</style>
